<template>
	<view class="container order-container">
		<!--地址-->
		<view class="order-address-info">
			<!-- v-else -->
			<block>
				<!-- 添加收货地址按钮 -->
				<my-address></my-address>
			</block>
		</view>

		<u-gap height="20" bg-color="#E8E8E8"></u-gap>
		<!-- 商品card -->
		<block v-for="item in cart" :key="item.id">
			<view class="order-main">
				<view class="image">
					<u-image width="200" height="200" :src="item.url"></u-image>
				</view>
				<view class="right">
					<view class="top">
						<view>{{item.name}}</view>
						<view>x {{item.count}}</view>
					</view>
					<view>¥{{item.price}}</view>
				</view>
			</view>
		</block>

		<!-- 页脚结算 -->
		<view class="footer-account-box order-accounts">
			<view class="total-account">
				付款合计: ¥ {{total}}
			</view>
			<view class="pay">去付款</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState('m_cart', ['cart']),
			total() {
				return this.cart.reduce((total, item) => total += item.count * item.price, 0)
					.toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	.order-main {
		display: flex;
		border-bottom: 3px #E8E8E8 solid;

		.image {
			margin: 20rpx;
			background-color: #F5F6F5;
			-webkit-border-radius: 5%;
			-moz-border-radius: 5%;
			border-radius: 5%;
		}

		.right {
			display: flex;
			flex-direction: column;
			flex-grow: 1;

			.top {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx 20rpx 0;
				box-sizing: border-box;
			}

			&>view:last-child {
				// content: 'xxx';
			}
		}
	}

	.order-accounts {
		position: fixed;
		bottom: var(--window-bottom);
		border-top: 3px #E8E8E8 solid;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.order-accounts>view {
		display: flex;
		align-items: center;
	}

	.total-account {
		flex: 1;
		color: #93312E;
		padding-left: 20rpx;
	}

	.pay {
		height: 100%;
		width: 200rpx;
		background-color: #AB956D;
		color: #fff;
		justify-content: center;
	}

	.pay:active {
		background: #84704d;
	}

	.pay.disabled {
		background: rgba(171, 149, 109, 0.6);
		pointer-events: auto;
	}
</style>
